<template>
  <div>
    
    <HeaderNav />
    <!--详细信息-->
    <div>
      <el-row>
        <el-col :span="6">
          左侧显示的图片
          <!-- <div>
            <img :src="'http://localhost:5162/' + (skuData.images)[0].imagePath" style="width:100%" />
          </div>
          <div>
            <el-carousel height="50px">
              <el-carousel-item v-for="item in skuData.images" :key="item">
                <img :src="'http://localhost:5162/' + item.imagePath" style="width:100%" />
              </el-carousel-item>
            </el-carousel>
          </div> -->

        </el-col>
        <el-col :span="17" :offset="1" style="text-align:left;">
          <div style="font-weight:600;font-size:20px;">{{ skuData.name }}</div>
          <div>
            折扣价格：<span style="color:red;">￥{{ skuData.salePrice }}</span>
            <span style="text-decoration:line-through;">会员价：{{ skuData.marketPrice }}</span>
          </div>
          <div>
            <div v-for="(item, index) in specData" :key="index">{{ item.specName }}：
              <el-tag type="warning" v-for="(sub, index2) in item.specValues" :key="index2">{{ sub.value }}</el-tag>
            </div>

          </div>
          <div><el-button @click="eventAddCar">加入购物车</el-button></div>
        </el-col>
      </el-row>
    </div>

    <!--规格包装-->
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="商品价格" name="first">商品价格</el-tab-pane>
        <el-tab-pane label="规格包装" name="second">规格包装</el-tab-pane>
        <el-tab-pane label="售后服务" name="third">售后服务</el-tab-pane>
        <el-tab-pane label="商品评价" name="fourth">商品评价</el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
//引入这个组件文件
import HeaderNav from '@/components/HeaderNav.vue'
export default {
  data() {
    return {
      activeName: 'first',
      skuData: {
        images: [
          { imagePath: '1.jpg' }
        ]
      },
      specData: []
    };
  },
  //要告诉页面，这个引入的组件文件，是一个组件 
    components: {
        //将这个组件在页面中，当作标签来使用即可
        HeaderNav
    }, 
  mounted() {
    this.onLoadData()
  },
  methods: {
    //加入购物车
    eventAddCar() {
      let url = this.$baseUrl + '/car'

      //获取登录用户的信息（在登录的时候，就将登录的用户信息放入到本地缓存了，所以这个时候可以直接取）
      let userInfo = localStorage.getItem('2010a_login_info')
      if(userInfo==null){
        this.$router.push('/member/login')
      }
      //这个时候，userInfo是json字符串，我们直接点不出来。需要将json字符串转换为json对象
      let userId = JSON.parse(userInfo).id
      
      let data = {
        "key": userId, //用户的唯一标识，这里用用户的ID作为唯一标识(当前登录的用户的Id)
        "values": [
          {
            "productId": this.skuData.id,//商品id
            "productPrice": this.skuData.salePrice, //商品价格
            "productNumber": 1, //商品数量
            "productName": this.skuData.name, //商品名称
            "productImage": "", //商品图片
            "productSpec": ""  //商品规格
          }
        ]
      }
      this.$http.post(url,data).then(res=>{
        console.log(res)
        if(res.data.code == 200){
          this.$message.info('成功加入购物车')
        }
        else{
          this.$message.error(res.data.message)
        }
      })
    },
    onLoadData() {
      let url = 'http://localhost:5162/product/byid'
      this.$http.get(url, {
        params: {
          skuId: this.$route.query.skuid,
          categoryId: this.$route.query.categoryid,
        }
      }).then(res => {
        console.log(res)
        this.skuData = res.data.data.skuData
        this.specData = res.data.data.specValue
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>